<template>
  <el-row class="searchFactory">
    <div style="padding-top: 10px">订单编号</div>
    <el-input
      class="factoryInput"
      v-model="orderCode"
      style="width: 15%"
    ></el-input>
    <el-button class="searchBtn" @click="search()">查询</el-button>
    <el-button class="resetBtn" @click="reset()">重置</el-button>
    <el-button class="addBtn" @click="createOrder()">+新建</el-button>
  </el-row>
  <el-row class="formCard">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="200">
        <template #default="scope">
          <span>{{ scope.row.code }}</span>
        </template>
      </el-table-column>
      <el-table-column label="产品名称" width="150">
        <template #default="scope">
          <span>{{ scope.row.proName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订购数量" width="80">
        <template #default="scope">
          <span>{{ scope.row.amount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交付日期" width="150">
        <template #default="scope">
          <span>{{ scope.row.handInDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投标截止日期" width="150">
        <template #default="scope">
          <span>{{ scope.row.deadline }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人" width="150">
        <template #default="scope">
          <span>{{ scope.row.receiver }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货人联系方式" width="200">
        <template #default="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收货地址" width="200">
        <template #default="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="80">
        <template #default="scope">
          <span>{{ scope.row.customerState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="publish(scope.row)"
            v-show="scope.row.customerState == '已保存'"
            >发布</el-button
          >
          <el-button
            size="mini"
            @click="bidInfo(scope.row)"
            v-show="scope.row.customerState == '已发布'"
            type="primary"
            >投标详情</el-button
          >
          <el-button
            size="mini"
            @click="receiveGood(scope.row)"
            v-show="scope.row.customerState == '已发货'"
            type="warning"
            >收货</el-button
          >
          <el-button
            size="mini"
            @click="deleteOrder(scope.row)"
            v-show="scope.row.customerState == '已保存'"
            type="danger"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-row>

  <!-- 新建订单弹窗 -->
  <el-dialog title="新增订单" v-model="newOrderFormVisible">
    <el-form :model="newOrder">
      <el-form-item label="产品名称" :label-width="formLabelWidth">
        <el-input v-model="newOrder.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="订购数量" :label-width="formLabelWidth">
        <el-input v-model="newOrder.amount" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="交付日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="newOrder.handInDate"
          type="date"
          placeholder="选择日期"
          style="margin-left: 10px; margin-right: 10px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="投标截止日期" :label-width="formLabelWidth">
        <el-date-picker
          v-model="newOrder.deadline"
          type="date"
          placeholder="选择日期"
          style="margin-left: 10px; margin-right: 10px"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="收货人" :label-width="formLabelWidth">
        <el-input v-model="newOrder.receiver" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="收货人联系方式" :label-width="formLabelWidth">
        <el-input v-model="newOrder.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="收货地址" :label-width="formLabelWidth">
        <el-input v-model="newOrder.address" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="newOrderFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="newOrderConfirm()">确 定</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 投标详情弹窗 -->
  <el-dialog title="投标信息列表" v-model="bidTableVisible">
    <el-table :data="bid">
      <el-table-column property="id" label="序号" width="80"></el-table-column>
      <el-table-column
        property="factory"
        label="投标工厂"
        width="150"
      ></el-table-column>
      <el-table-column property="manager" label="工厂负责人"></el-table-column>
      <el-table-column
        property="phone"
        label="联系方式"
        width="150"
      ></el-table-column>
      <el-table-column
        property="price"
        label="投标价格"
        width="100"
      ></el-table-column>
      <el-table-column
        property="isChosen"
        label="是否中标"
        width="50"
      ></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="chooseBid(scope.row)" type="success"
            >选标</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
import axios from 'axios'
import { ElMessage } from 'element-plus'
export default {
  name: 'orderManage',
  data() {
    return {
      formLabelWidth: '120px',
      newOrderFormVisible: false,
      bidTableVisible: false,
      newOrder: {},
      tableData: [{}],
      newTable: [],
      bid: [{}],
      selectOrder: {},
      orderCode: '',
    }
  },
  mounted() {
    this.getOrder()
  },
  methods: {
    getOrder() {
      console.log(this.$store.state.user)
      axios
        .post('/order/listCustomerOrder', this.$store.state.user)
        .then((res) => {
          console.log(res.data.data)
          this.tableData = res.data.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    createOrder() {
      this.newOrderFormVisible = true
    },
    newOrderConfirm() {
      axios
        .post('/order/addOrder', {
          productName: this.newOrder.name,
          amount: this.newOrder.amount,
          handInDate: this.newOrder.handInDate.toGMTString(),
          deadline: this.newOrder.deadline.toGMTString(),
          receiver: this.newOrder.receiver,
          phone: this.newOrder.phone,
          address: this.newOrder.address,
          userAccount: this.$store.state.user.account,
          orderStateForCustomer: '已保存',
          orderStateForFactory: '未投标',
          factoryId: 0,
        })
        .then((res) => {
          var m = res.data.message
          console.log(res)
          if (res.data.code == 200) {
            console.log(res.data.data)
            this.tableData.push(res.data.data)
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
      this.newOrderFormVisible = false
    },
    deleteOrder(o) {
      this.selectOrder = o
      console.log(this.selectOrder)
      axios
        .post('/order/deleteOrder', this.selectOrder)
        .then((res) => {
          console.log(res)
          var m = res.data.message
          if (res.data.code == 200) {
            this.tableData.forEach(function (item, index, arr) {
              if (item == o) {
                arr.splice(index, 1)
              }
            })
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
        .catch((failResponse) => {
          console.log('fail msg')
          console.log(failResponse)
        })
    },
    publish(o) {
      this.selectOrder = o
      axios
        .post('/order/modifyState', {
          id: this.selectOrder.id,
          orderStateForCustomer: '已发布',
          orderStateForFactory: '未投标',
        })
        .then((res) => {
          var m = res.data.message
          console.log(res)
          o.customerState = '已发布'
          if (res.data.code == 200) {
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
    },
    receiveGood(o) {
      this.selectOrder = o
      o.state = '已收货'
      axios
        .post('/order/modifyState', {
          id: this.selectOrder.id,
          orderStateForCustomer: '已收货',
          orderStateForFactory: '已收货',
        })
        .then((res) => {
          var m = res.data.message
          console.log(res)
          if (res.data.code == 200) {
            o.customerState = '已收货'
            ElMessage.success({
              message: m,
              type: 'success',
            })
          } else {
            ElMessage.error(m)
          }
        })
    },
    bidInfo(o) {
      this.selectOrder = o
      this.bidTableVisible = true
      axios
        .post('/order/allBid', this.selectOrder)
        .then((res) => {
          console.log(res.data.data)
          this.bid = res.data.data
        })
        .catch((err) => {
          console.error(err)
        })
    },
    chooseBid(b) {
      axios
        .post('/order/chooseBid', {
          id: b.id,
          orderId: this.selectOrder.id,
          factory: b.factory,
        })
        .then((res) => {
          b.isChosen = '已中标'
          this.selectOrder.customerState = '投标结束'
          ElMessage.success({
            message: res.data.message,
            type: 'success',
          })
        })
    },
    search() {
      this.newTable = this.tableData
      this.tableData = this.newTable.filter((val) => val.code == this.orderCode)
    },
    reset() {
      this.getOrder()
      this.orderCode = ''
    },
  },
}
</script>

<style lang="less" scoped>
.el-input {
  width: 10rem;
  padding: 0 30px 30px 30px;
  font-size: 1.2em;
}
.el-button {
  height: 10px;
}
.addBtn {
  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
  font-weight: bold;
}
</style>
